<script setup lang="ts">
import { ref } from 'vue'
import Bus from '@/utils/bus'

interface LayerItem {
  id: number
  name: string
  selected: boolean
}

const emits = defineEmits(['selectRecord'])

const show = ref(true)

const layersList = ref<LayerItem[]>([
  { id: 0, name: '全部', selected: true },
  { id: 1, name: '一级排水户', selected: true },
  { id: 2, name: '二级排水户', selected: true },
  { id: 3, name: '出门井', selected: true },
  { id: 4, name: '接户井', selected: true },
  { id: 5, name: '市政井', selected: true },
])

const isLoading = ref(false)

function resetAllLayers() {
  layersList.value.forEach((layer) => {
    layer.selected = true
  })
}

function emitSelectedTypes() {
  const selectedTypes = layersList.value
    .slice(1) // 排除"全部"选项
    .filter(layer => layer.selected)
    .map(layer => layer.id)

  // 如果全部选中，发送所有类型
  if (layersList.value[0].selected) {
    emits('selectRecord', { selectTypes: [1, 2, 3, 4, 5] })
  }
  else {
    // 否则只发送选中的类型
    emits('selectRecord', { selectTypes: selectedTypes })
  }
}

function toggleAll() {
  const allSelected = layersList.value[0].selected
  layersList.value.forEach((layer) => {
    layer.selected = !allSelected
  })
  emitSelectedTypes()
}

function toggleLayer(index: number) {
  if (index === 0) {
    toggleAll()
    return
  }

  layersList.value[index].selected = !layersList.value[index].selected

  // 如果有任何一个未选中，取消"全部"的选中状态
  const allOthersSelected = layersList.value.slice(1).every(layer => layer.selected)
  layersList.value[0].selected = allOthersSelected

  emitSelectedTypes()
}

function addEvent() {
  Bus.$on('showLayerControl', (value) => {
    show.value = value
  })
  Bus.$on('resetLayers', () => {
    resetAllLayers()
  })
}

onMounted(() => {
  addEvent()
})
</script>

<template>
  <div v-if="show" class="wrap">
    <div
      v-for="(layer, index) in layersList"
      :key="layer.id"
      class="layer-item" :class="{ active: layer.selected }"
      @click="toggleLayer(index)"
    >
      {{ layer.name }}
      <van-divider v-if="index !== 5" vertical :style="{ borderColor: '#DAD7D7', height: '40px', marginLeft: '16px' }" />
    </div>
  </div>
  <van-popup v-model:show="isLoading" round :style="{ width: '120px', height: '120px' }">
    <van-loading class="loading" size="40px" vertical type="spinner" color="#0070bc">
      努力加载中...
    </van-loading>
  </van-popup>
</template>

<style scoped lang="less">
.wrap {
  position: absolute;
  width: 100%;
  background-color: #fff;
  height: 50px;
  bottom: 3px;
  overflow-x: auto;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;

  &::-webkit-scrollbar {
    height: 0.5px;
  }

  &::-webkit-scrollbar-thumb {
    background: #807c7c;
    border-radius: 2px;
  }
}
.loading {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.layer-item {
  padding: 0px 12px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s;

  &.active {
    color: #0070bc;
  }
}
.van-divider {
  margin: 0;
}
</style>
